<template>
    <div class="data-setting">
        <setting-item-box name="请求方式" :alone="true">
            <a-select
                ref=""
                v-model:value="targetData.request.requestDataType"
                style="width: 100%"
            >
                <a-select-option v-for="item in selectOptions" :key="item.value" :value="item.value">
                    {{ item.label }}
                </a-select-option>
            </a-select>
        </setting-item-box>
        <!-- 静态请求处理 -->
        <chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
        <chart-data-ajax v-if="targetData.request.requestDataType === RequestDataTypeEnum.AJAX"></chart-data-ajax>
        <chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond>
    </div>
</template>

<script setup lang="ts">
import { useTargetData } from '../../hooks/useTargetData';
import settingItemBox from '@/components/chart/settingItemBox/index.vue'
import { SelectCreateDataEnum, type SelectCreateDataType } from './data';
import { RequestDataTypeEnum } from '@/const';
import chartDataStatic from './components/chartDataStatic/index.vue'
import chartDataAjax from './components/chartDataAjax/index.vue'
import chartDataPond from './components/chartDataPond/index.vue'

const {targetData} = useTargetData()

// 选项
const selectOptions: SelectCreateDataType[] = [
    {
        label: SelectCreateDataEnum.STATIC,
        value: RequestDataTypeEnum.STATIC
    },
    {
        label: SelectCreateDataEnum.AJAX,
        value: RequestDataTypeEnum.AJAX
    },
    {
        label: SelectCreateDataEnum.Pond,
        value: RequestDataTypeEnum.Pond
    }
]
</script>

<style lang='scss' scoped></style>